<template>
  <div>
    <div class="common_title">
        <span style="font-size:20px;font-weight:bold">数据备份</span>
      </div>
    <!-- 查询框 -->
    <div class="query_bg">
        <span class="query_bg_addData" style="margin-left:20px">
            <el-button type="goon" icon="el-icon-files" @click="databaseBackupClick" :size="size">数据库备份</el-button>
        </span>
        <div class="grid-content bg-purple-light"></div>
    </div>
    <!-- <hr style='border:0.5px inset #FAFAFA;'> -->
    <!-- 数据列表框 -->
    <div  class="dataList_bg">
      <div class="dataList">
        <el-table size="size" :data="tableData" tooltip-effect="dark" style="width: 98%" :default-sort = "{prop: 'id', order: 'descending'}" border>
            <el-table-column prop="id" label="序号" sortable header-align="center" align="center" width="160">
              <template slot-scope="scope">
                <span>{{(page - 1) * perPage + scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="fileName" label="文件名" header-align="center" align="center"> </el-table-column> 
            <el-table-column prop="userName" label="创建人" header-align="center" align="center"> </el-table-column>
            <el-table-column prop="dateTime" sortable label="创建时间" header-align="center" align="center"> </el-table-column>
            <el-table-column prop="" label="操作" width="400" show-overflow-tooltip header-align="center" align="center">
                <template slot-scope="scope">
                  <el-button round size="mini" @click="databaseRestoreClick(scope.row)">数据库还原</el-button>
                  <el-button type="danger" round size="mini" @click="deleteRoleClick(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block" style="width:98%;text-align:right;margin-top:10px;">
          <el-pagination @size-change="handleperPageChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 50]"
          :page-size="perPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
      return {
        size: "small",
        value: '',
        input: '',
        page: 1, //当前页
        perPage: 10, //每页多少条数据
        total: 0, //总共多少条数据
        startUseValue:true,
        tableData: [],
        multipleSelection: [],
        loading: '',
      }
    },
    methods: {
      //获取表格数据
      getData() {
        this.$api.backup.queryJob(this.page,this.perPage).then(res => {
          console.log(res)
          this.tableData = res.data.tBackupLogList;
        });
      },
      // 获取数据总量
      getCount() {
        this.$api.backup.count().then(res => {
          console.log(res)
          this.total = res.data.totalSize;
        });
      },
      //改变每页多少条数据
      handleperPageChange(val) {
      },
      handleCurrentChange(val) {
      },
      // 数据库备份
      databaseBackupClick() {
        console.log("数据库备份");
        this.$confirm("确认数据库备份吗？", "提示", {
            type: "warning"
        }).then(() => {
          this.loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          this.$api.backup.databaseBackup().then(res => {
            if (res.code == 200) {
              this.$message({ message: res.msg, type: "success" });
              this.loading =false
              this.getData();
              this.loading.close();
            }else{
              this.$message({ message: res.msg, type: "error" });
              this.loading =false
              this.getData();
              // this.loading.close();
            }
          });
        }).catch(() => {});
      },
      // 数据库还原
      databaseRestoreClick(row) {
        console.log(row);
        this.$confirm("确认还原数据库吗？", "提示", {
            type: "warning"
        }).then(() => {
          console.log(row.fileName);
          this.loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          let data = {
            sqlname: row.fileName,
          }
          this.$api.backup.databaseRestore(row.fileName).then(res => {
            if (res.code == 200) {
              this.$message({ message: "还原成功", type: "success" });
              this.getData();
              this.loading.close();
            }else{
              this.$message({ message: res.msg, type: "error" });
              this.getData();
              // this.loading.close();
            }
          });
        }).catch(() => {});
      },
      // 删除
      deleteRoleClick(row) {
        this.$confirm("确认删除选中备份吗？", "提示", {
            type: "warning"
        }).then(() => {
            console.log(row);
            this.$api.backup.deleteDatabackup(row.fileName).then(res => {
            this.page = 1;
            this.getData();
            this.getCount();
            this.$message({ message: "删除成功", type: "success" });
            console.log(res);
            });
        }).catch(() => {});;
      },
    },
    mounted() {
      this.getData();
      this.getCount();
    },
}
</script>

<style lang="less" scoped>
.common_title {
    margin-top: 20px;
}
.query_bg {
    float: right;
    margin-right: 60px;
    height: 80px;
    line-height: 80px;
    margin-top: 10px;
    //   background-color: hotpink;
    .el-button--goon {
      color: #FFF;
      background-color: #37508D;
      border-color: #37508D;
    }

    .el-input, .el-select {
        width: 140px;
    }
}

.dataList_bg {
      height: 90%;
      margin-top: 5px;
    //   background-color: lawngreen;
}

</style>
